<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎你，{{ name }}</div>
    <div class="chat-container">
      <div class="chat-win" id="chatWinContainer">
        <div v-for="(item, index) in chatMessages" :key="index">
          <div class="chat-show-time">{{ item.createTime }}</div>
          <div v-if="item.messageType === 1" class="receive-show-div">
            <div class="receive-show-content">{{ item.content }}</div>
          </div>
          <div v-if="item.messageType === 2" class="send-show-div">
            <div class="send-show-content">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <div class="chat-button">
        <div class="chat-user chatMargin">
          <el-select
          v-model="messageForm.receiveUserId"
          style="width: 100%;"
          @change="selectReceiveUserChange">
            <el-option
            v-for="(item, index) in userOptions"
            :key="Number(index)"
            :label="item.username"
            :value="Number(item.id)">
            </el-option>
          </el-select>
        </div>
        <div class="chat-text chatMargin">
          <el-input type="text" v-model="messageForm.content"/>
        </div>
        <div class="chat-emoji chatMargin">
          <svg-icon icon-class="smiling-face" :size="2.5" @click="showEmojiSelect"></svg-icon>
          <div class="emoji-content" v-if="showEmoji">
            <Picker :data="emojiIndex" @select="handleSelectEmoji"/>
          </div>
        </div>
        <div>
          <el-button type="success" @click="clickSendMessage"> 发送 </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import data from 'emoji-mart-vue-fast/data/all.json'
import { EmojiIndex } from 'emoji-mart-vue-fast/src'

import { sendMessage, receiveUserChatList } from '@/api/userChat'
import { userEnableList } from '@/api/user'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'socketMsg',
      'info'
    ])
  },
  data() {
    return {
      userOptions: [],
      messageForm: {
        content: '',
        receiveUserId: null,
      },
      chatMessages: [],
      emojiIndex: new EmojiIndex(data),
      showEmoji: false
    }
  },
  watch: {
    socketMsg: {
      handler(val) {
        if(!val) return
        const msgType = Number(val.msgType)
        if(msgType === 200) {
          const receiveData = val.data
          this.showReceiveChatMessage(receiveData)
        }
      },
    },
  },
  created() {
    this.$nextTick(()=> {
      this.loadSysUser()
    })
  },
  methods: {
    // 加载用户信息
    async loadSysUser() {
      const res = await userEnableList()
      this.userOptions = res.data.filter(item=> this.info.id !== item.id)
    },

    // 发送消息
    async clickSendMessage() {
      if(!this.messageForm.content) {
        this.$message.error('请输入发送内容')
        return
      }
      this.showSendChatMessage(this.messageForm)
      setTimeout(()=> {
        this.positionScrollBottom()
      }, 50)
      setTimeout(async ()=> {
        await sendMessage(this.messageForm)
        this.messageForm.content = ''
      }, 500)
    },

    // 展示接收到的信息
    async showReceiveChatMessage(message) {
      const messages = {
        content: message.content,
        createTime: message.createTime,
        messageType: 1
      }
      this.chatMessages.push(messages)
      setTimeout(()=> {
        this.positionScrollBottom()
      }, 50)
    },

    // 展示发送者信息
    async showSendChatMessage(message) {
      const messages = {
        content: message.content,
        createTime: message.createTime,
        messageType: 2
      }
      this.chatMessages.push(messages)
    },

    // 定位到底部
    positionScrollBottom() {
      var element = document.getElementById("chatWinContainer");
      element.scrollTop = element.scrollHeight;
    },

    // 选择接收人
    async selectReceiveUserChange(userId) {
      this.chatMessages = []
      const res = await receiveUserChatList({ receiveUserId: userId })
      const chatList = res.data
      chatList.forEach(item => {
        if(item.mineSend === 1) {
          this.showSendChatMessage({ content: item.content, createTime: item.createTime })
        } else if(item.mineSend === 0) {
          this.showReceiveChatMessage({ content: item.content, createTime: item.createTime })
        }
      });
    },

    // 选择表情
    handleSelectEmoji(emoji) {
      console.log(emoji)
      this.messageForm.content = this.messageForm.content.concat(emoji.native)
    },

    // 展示表情
    showEmojiSelect() {
      this.showEmoji = !this.showEmoji
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {
  display: flex;
  justify-content: space-between;

  .chat-container {
    width: 30%;
    height: 100%;
    overflow: scroll;

    .chat-button {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;

      .chat-text {
        width: 85%;
      }

      .chat-emoji {

        .emoji-content {
          position: absolute;
          top: 50%;
          left: 50%;
        }
      }
    }

    .chat-win {
      height: calc(100vh - 400px);
      background-color: white;
      border: 1px solid #DCDFE6;
      overflow: scroll;
      padding-top: 10px;

      .receive-show-div {
        display: flex;
        justify-content: flex-start;

        .receive-show-content {
          max-width: 300px;
          margin: 10px;
          padding: 10px;
          background-color: #409EFF;
          border-radius: 5px;
          white-space: normal; /* 允许文本正常换行 */
          overflow-wrap: break-word; /* 允许长单词换行 */
        }
      }

      .send-show-div {
        display: flex;
        justify-content: flex-end;

        .send-show-content {
          max-width: 300px;
          margin: 10px;
          padding: 10px;
          background-color: #67C23A;
          border-radius: 5px;
          white-space: normal; /* 允许文本正常换行 */
          overflow-wrap: break-word; /* 允许长单词换行 */
        }
      }

      .chat-show-time {
        display: flex;
        justify-content: center;
        color: #C0C4CC;
      }
    }
  }

  .chatMargin {
    margin-right: 10px;
  }
}
</style>
